<!--  -->
<template>
  <table width="100%">
    <thead>
      <tr>
        <th v-for="(i,index) in 4" :key="index">标准版</th>
      </tr>
    </thead>
    <tbody v-for="(i,index) in 4" :key="index">
      <tr class="head">
        <th>{{index+1}}.集群管理</th>
      </tr>
      <tr v-for="(i,idx) in 4" :key="idx">
        <td>{{index+1}}.{{idx+1}} 主机管理</td>
        <td><span></span></td>
        <td><span></span></td>
        <td><span></span></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  components: {},

  data () {
    return {}
  },

  computed: {},

  methods: {}
}
</script>
<style lang='less' scoped>
  thead th {
    color: #666;
    .ft(24);
    font-weight: normal;
    .t-c;
    .bd-bottom(#ddd,2px);
    @media @max768 {
      .ft(16);
    }
  }
  tbody {
    th {
      .ft(30);
      padding: 20px;
      .t-l;
      font-weight: normal;
      @media @max768 {
        .ft14;
        padding: @1rem * 0.5;
      }
    }
    .head+tr td {
      .bd-top(#ddd);
    }
    td:first-child {
      color: #666;
      padding-left: 40px;
      .t-l;
      line-height: 1.42857143;
      vertical-align: top;
      @media @max768 {
        padding-left: @1rem * 0.5;
      }
    }
    td {
      line-height: 1.42857143;
      vertical-align: top;
      border-top: 0;
      color: #66bf54;
      .ft(18);
      padding: 20px;
      .t-c;
      @media @max768 {
        .ft12;
        padding: @1rem * 0.5;
      }
    }
    span {
      width: 22px;
      height: 22px;
      background: url(/static/images/icon-d.png) no-repeat center;
      background-size: 24px;
      display: block;
      margin: 0 auto;
    }
  }
</style>
